<template>
  <div class="app-container">
    <!--查询表单  inline="true"在一行显示-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="teacherQuery.name" placeholder="讲师名"/>
      </el-form-item>
      <el-form-item>
        <el-select v-model="teacherQuery.level" clearable placeholder="讲师头衔">
          <el-option :value="1" label="高级讲师"/>
          <el-option :value="2" label="首席讲师"/>
        </el-select>
      </el-form-item>
      <el-form-item label="添加时间">
        <el-date-picker
          v-model="teacherQuery.begin"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="teacherQuery.end"
          type="datetime"
          placeholder="选择截止时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="pageTeacherCondition()">查询</el-button>
      <el-button type="default" @click="resetData()">重置</el-button>
    </el-form>
    <!-- 表格 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="数据加载中"
      border
      fit
      highlight-current-row>

      <el-table-column
        label="序号"
        width="70"
        align="center">
        <template slot-scope="scope">
          {{ (current - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="name" label="名称" width="80" />

      <el-table-column label="头衔" width="80">
        <template slot-scope="scope">
          {{ scope.row.level===1?'高级讲师':'首席讲师' }}
        </template>
      </el-table-column>

      <el-table-column prop="intro" label="资历" />

      <el-table-column prop="gmtCreate" label="添加时间" width="160"/>

      <el-table-column prop="gmtModified" label="修改时间" width="160"/>

      <el-table-column prop="sort" label="排序" width="60" />

      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="update(scope.row.id)">修改</el-button>

          <el-dialog title="讲师修改" :visible.sync="dialogFormVisible" top="10vh" width="50%" :close-on-click-modal="false"  center>
            <el-form label-width="120px">
              <el-form-item label="讲师名称">
                <el-input v-model="teacher.name"/>
              </el-form-item>
              <el-form-item label="讲师排序">
                <el-input-number v-model="teacher.sort" controls-position="right" :min='0'/>
              </el-form-item>
              <el-form-item label="讲师头衔">
                <el-select v-model="teacher.level" clearable placeholder="请选择">
                  <!--
                    数据类型一定要和取出的json中的一致，否则没法回填
                    因此，这里value使用动态绑定的值，保证其数据类型是number
                  -->
                  <el-option :value="1" label="高级讲师"/>
                  <el-option :value="2" label="首席讲师"/>
                </el-select>
              </el-form-item>
              <el-form-item label="讲师资历">
                <el-input v-model="teacher.career"/>
              </el-form-item>
              <el-form-item label="讲师简介">
                <el-input v-model="teacher.intro" :rows="10" type="textarea"/>
              </el-form-item>

              <!-- 讲师头像 -->
              <el-form-item label="讲师头像">
                <!-- 头衔缩略图 -->
                <pan-thumb :image="teacher.avatar"/>
                <!-- 文件上传按钮 -->
                <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像</el-button>
                <!--
            v-show：是否显示上传组件
            :key：类似于id，如果一个页面多个图片上传控件，可以做区分
            :url：后台上传的url地址
            @close：关闭上传组件
            @crop-upload-success：上传成功后的回调
              <input type="file" name="file"/>
            -->
                <image-cropper
                  v-show="imagecropperShow"
                  :width="300"
                  :height="300"
                  :key="imagecropperKey"
                  :url="BASE_API+'/eduoss/fileoss/uploadOssFile'"
                  field="file"
                  @close="close"
                  @crop-upload-success="cropSuccess"/>
              </el-form-item>

              <el-form-item>
                <el-button :disabled="saveBtnDisabled" type="primary" @click="updateTeacherById">提交</el-button>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>

          <!--<router-link :to="'/teacher/edit/'+scope.row.id">-->
            <!--<el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>-->
          <!--</router-link>-->
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page="current"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="pageTeacherCondition"
    />
  </div>
</template>

<script>
  //引入teacher.js
  import teacher from '@/api/edu/teacher'
  import ImageCropper from '@/components/ImageCropper'
  import PanThumb from '@/components/PanThumb'

  //export表示可以被别人调用
  export default {
    components: {ImageCropper,PanThumb},
    //定义当前页面使用的变量和初始值
    data(){
      return{
        current: 1,
        limit: 10,
        total: 0,//总记录数
        teacherQuery: {},//查询条件
        list: null, //用于保存接口返回的数据
        listLoading: true,
        dialogFormVisible: false,
        teacher:{},
        saveBtnDisabled: false, // 保存按钮是否禁用
        imagecropperShow: false, // 上传弹窗组件是否显示
        imagecropperKey: 0, // 上传弹窗组件key值
        BASE_API: process.env.BASE_API
      }
    },
    //在页面渲染之前执行
    created() {
      this.pageTeacherCondition()
    },
    //自定义方法，调用teacher.js里的方法
    methods:{
      //分页查询讲师列表  current=1意为默认为1
      pageTeacherCondition(current=1){
        this.current = current
        teacher.pageTeacherCondition(this.current,this.limit,this.teacherQuery)
          .then(response=>{
            this.listLoading =false
            //接口成功返回数据
            this.list = response.data.data
            this.total = response.data.total
          })
      },

      resetData() {
          this.teacherQuery = {}
          this.pageTeacherCondition()
      },

      removeDataById(id) {
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() => {
        teacher.removeById(id)
          .then(response=>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.pageTeacherCondition()
          })
        })
      },

      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(response => {
            done();
          })
          .catch(error => {});
      },

      update(id){
        this.teacher = {}
        teacher.getTeacherById(id)
          .then(response=>{
            this.teacher = response.data
          });
        this.dialogFormVisible = true

      },
      //关闭上传弹窗的方法
      close(){
        this.imagecropperShow = false
        //上传组件初始化
        this.imagecropperKey = this.imagecropperKey+1

      },
      //上传成功的方法
      cropSuccess(response){
        this.teacher.avatar = response
        this.imagecropperShow = false
      },
      // 保存
      updateTeacherById() {
        if (this.teacher.name==''){
          this.$message({
            type: 'warning',
            message: '请填写讲师名称!'
          });
          this.saveBtnDisabled = false
          return
        }
        this.saveBtnDisabled = true
        this.teacher.gmtCreate = null
        this.teacher.gmtModified = null
        teacher.updateTeacherById(this.teacher)
          .then(response => {
            this.$message({
              type: 'success',
              message: '修改成功✔'
            });
            this.saveBtnDisabled = false
            this.dialogFormVisible = false
            this.pageTeacherCondition()
          })
          .catch(error =>{
            this.saveBtnDisabled = false
          })
      }

    }
  }
</script>

<style scoped>
</style>

